<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="assets/tree-sitter-playground-0.19.3/style.css" media="screen" type="text/css">
  <title>Tree-sitter TOML Playground</title>
</head>

<body>
  <div id="container">
    <main id="main-content">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.css">
<style>
.version {
  font-size: 0.5em;
}
.credit {
  font-style: italic;
  margin-top: 20px;
  text-align: center;
}
</style>

<h1><a href="https://github.com/ikatyang/tree-sitter-toml">Tree-sitter TOML</a> <span class="version">v0.5.1</span></h1>

<div id="playground-container" style="visibility: hidden;">

<h4>Code</h4>
<select id="language-select">
  <option value="toml" selected="selected">TOML</option>
</select>

<input id="logging-checkbox" type="checkbox"></input>
<label for="logging-checkbox">Log</label>

<input id="query-checkbox" type="checkbox"></input>
<label for="query-checkbox">Query</label>

<textarea id="code-input">
</textarea>

<div id="query-container" style="visibility: hidden; position: absolute;">
  <h4>Query</h4>
  <textarea id="query-input"></textarea>
</div>

<h4>Tree</h4>
<span id="update-time"></span>
<div id="output-container-scroll">
  <pre id="output-container" class="highlight"></pre>
</div>

</div>

<div class="credit">
  This playground was modified from <a href="https://tree-sitter.github.io/tree-sitter/playground">the official Tree-sitter Playground</a>.
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.js"></script>

<script>LANGUAGE_BASE_URL = "assets/tree-sitter-toml-0.5.1";</script>
<script src="assets/web-tree-sitter-0.19.3/tree-sitter.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.js"></script>
<script src="assets/tree-sitter-playground-0.19.3/playground.js"></script>

<script>
((codeExample, queryExample) => {
  const handle = setInterval(() => {
    const $codeEditor = document.querySelector('.CodeMirror');
    const $queryEditor = document.querySelector('#query-container .CodeMirror');
    const $queryCheckbox = document.querySelector('#query-checkbox');
    if ($codeEditor && $queryEditor) {
      $codeEditor.CodeMirror.setValue(codeExample);
      if (queryExample) {
        $queryEditor.CodeMirror.setValue(queryExample);
        if (!$queryCheckbox.checked) $queryCheckbox.click();
      }
      clearInterval(handle);
    }
  }, 500);
})(`# This is a TOML document.

title = "TOML Example"

[owner]
name = "Tom Preston-Werner"
dob = 1979-05-27T07:32:00-08:00 # First class dates

[database]
server = "192.168.1.1"
ports = [ 8001, 8001, 8002 ]
connection_max = 5000
enabled = true

[servers]

  # Indentation (tabs and/or spaces) is allowed but not required
  [servers.alpha]
  ip = "10.0.0.1"
  dc = "eqdc10"

  [servers.beta]
  ip = "10.0.0.2"
  dc = "eqdc10"

[clients]
data = [ ["gamma", "delta"], [1, 2] ]

# Line breaks are OK when inside arrays
hosts = [
  "alpha",
  "omega"
]
`, `; Properties
;-----------

(bare_key) @property
(quoted_key) @string

; Literals
;---------

(boolean) @constant.builtin
(comment) @comment
(string) @string
(integer) @number
(float) @number
(offset_date_time) @string.special
(local_date_time) @string.special
(local_date) @string.special
(local_time) @string.special

; Punctuation
;------------

"." @punctuation.delimiter
"," @punctuation.delimiter

"=" @operator

"[" @punctuation.bracket
"]" @punctuation.bracket
"[[" @punctuation.bracket
"]]" @punctuation.bracket
"{" @punctuation.bracket
"}" @punctuation.bracket
`);
</script>

    </main>
  </div>
</body>
</html>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  crossorigin="anonymous">
</script>
